<template>
  <div class="common-layout">
    <el-container>
      <el-header class="el-header">
        <span style="margin: auto"> 业财一体</span>
      </el-header>
      <el-container>
      <el-aside class="el-aside">
          <el-scrollbar>
            <el-menu class="el-menu"
                     background-color="#17A2B8"
                     :unique-opened="true"
                     :default-active="$route.path"
                     active-text-color="#FFFF80"
                     text-color="#ffffff"
                     router>
              <MenuTree :menuList="menuList"></MenuTree>
            </el-menu>
          </el-scrollbar>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>

    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import MenuTree from '@/components/menustree.vue';

export default {
  name: 'HomeView',
  components: {
    MenuTree
  },
  data() {
    return {
      menuList: [
        {
          id: 1,
          parentid: '0',
          name: '凭证',
          icon: 'HomeFilled',
          url: '/homepage'
        },
        {
          id: 2,
          parentid: '0',
          name: '卡片生成',
          icon: 'Postcard',
          url: '/cardGenera'
        },
        {
          id: 3,
          parentid: '0',
          name: '出租车承包人',
          icon: 'Menu',
          url: '/taxiContractor'
        },
        {
          id: 4,
          parentid: '0',
          name: '合同档案',
          icon: 'ToiletPaper',
          url: '/contractFile'
        },
        {
          id: 5,
          parentid: '0',
          name: '专项资金',
          icon: 'Money',
          url: '/specialFunds'
        },
        {
          id: 6,
          parentid: '0',
          name: '银行账户',
          icon: 'Place',
          url: '/bankAccounts'
        },
        {
          id: 7,
          parentid: '0',
          name: '客商档案',
          icon: 'Camera',
          url: '/merchantFile'
        },
        {
          id: 8,
          parentid: '0',
          name: '项目档案',
          icon: 'Promotion',
          url: '/projectFile'
        },
        {
          id: 9,
          parentid: '0',
          name: '会计科目',
          icon: 'Sunset',
          url: '/accountSubject'
        },
        {
          id: 10,
          parentid: '0',
          name: '资产分类',
          icon: 'Compass',
          url: '/assetClass'
        },
        {
          id: 11,
          parentid: '0',
          name: '部门档案',
          icon: 'FolderAdd',
          url: '/deptFile'
        }
      ],
    }
  },
}
</script>
<style>

.el-header {
  /* 顶部部分的高度(默认60px) */
  background-color: #FFC107;
  color: #000000;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

.el-aside {
  width: 180px;
  background-color: #17A2B8;
  min-height: calc(100vh - 60px);
}

.el-menu {
  width: 180px;
  min-height: 100%;
}

.el-menu span {
  margin-left: 10px;
}

</style>